import { FieldType } from "@/actions/listDeal";

const initSize = (canvas: HTMLCanvasElement) => {
  const parent = canvas.parentElement;
  const width = parent?.clientWidth || 300;
  const height = parent?.clientHeight || 200;
  //   var devicePixelRatio = 1;
  var devicePixelRatio = window.devicePixelRatio || 1;

  // 设置Canvas的宽度和高度
  canvas.width = width * devicePixelRatio;
  canvas.height = height * devicePixelRatio;

  // 设置CSS样式以保持Canvas的显示尺寸不变
  canvas.style.width = `${width}px`;
  canvas.style.height = `${height}px`;
};
const gridPadding = 60;
var devicePixelRatio = window.devicePixelRatio || 1;
export const drawGrid = (
  ctx: CanvasRenderingContext2D,
  canvas: HTMLCanvasElement,
  gridSize: number,
  gridCount: number
) => {
  // 设置线条的颜色和宽度
  ctx.strokeStyle = "black";
  ctx.lineWidth = 1;
  // 将原点移动到画布的左下角
  // 注意，因为画布的坐标是从左上角开始的，所以我们将Y坐标翻转，
  //   这样(0, 0)就变成了左下角。
  //   ctx.save();
  ctx.translate(gridPadding, canvas.height - gridPadding);

  // 我们还需要缩放Y轴，使其向下为负值
  ctx.scale(devicePixelRatio, -1 * devicePixelRatio);

  for (let i = 0; i <= gridCount; i++) {
    ctx.beginPath();
    ctx.moveTo(i * gridSize, 0);
    ctx.lineTo(i * gridSize, canvas.height);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(0, i * gridSize);
    ctx.lineTo(canvas.width, i * gridSize);
    ctx.stroke();
  }

  //   ctx.restore();
  // 绘制X轴和Y轴
  //   ctx.strokeStyle = "black";
  //   ctx.lineWidth = 1;
  //   ctx.beginPath();
  //   ctx.moveTo(-canvas.width, 0);
  //   ctx.lineTo(canvas.width, 0);
  //   ctx.moveTo(0, -canvas.height);
  //   ctx.lineTo(0, canvas.height);
  //   ctx.stroke();

  // 绘制矩形
  //   ctx.fillStyle = "red";

  // 设置描边颜色

  // 设置描边宽度

  // 填充矩形
  // ctx.fillRect(10, 10, 100, 100); // 参数分别是 x, y, 宽度, 高度
  //   drawText()
};

const drawText = (
  ctx: CanvasRenderingContext2D,
  canvas: HTMLCanvasElement,
  text: string,
  font: number,
  x: number,
  y: number
) => {
  const height = canvas.height / 2;
  const width = canvas.width / 2;
  //   ctx.translate(0, height);
  //   ctx.scale(devicePixelRatio,-1 * devicePixelRatio)
  ctx.save();

  //   ctx.scale(1, -1);
  // 旋转文本
  //   ctx.translate(x, y);
  //   ctx.rotate(Math.PI);
  //   ctx.translate(-x, -y);
  // 设置字体样式
  // 设置基线为顶部

  ctx.font = `${font}px Arial`;
  let strWidth = ctx.measureText(text).width;
  ctx.textBaseline = "top";
  ctx.translate(0, font + y * 2);
  ctx.rotate(2 * Math.PI);
  ctx.scale(1, -1);
  ctx.fillStyle = "blue";
  ctx.fillText(text, x, y);
  ctx.restore();

  //   ctx.save();
  //   ctx.fillStyle = "red";
  //   ctx.fillRect(strWidth, 40, 100, 100); // 参数分别是 x, y, 宽度, 高度
  //   ctx.restore();

  // // 设置基线为中间
  // ctx.textBaseline = 'middle';
  // y += 50; // 调整y坐标以避免重叠
  // ctx.fillText(text, x, y);

  // // 设置基线为alphabetic（默认）
  // ctx.textBaseline = 'alphabetic';
  // y += 50; // 再次调整y坐标
  // ctx.fillText(text, x, y);

  // // 设置基线为ideographic
  // ctx.textBaseline = 'ideographic';
  // y += 50; // 最后调整y坐标
  // ctx.fillText(text, x, y);

  // 获取文本宽度
  //   var textWidth = ctx.measureText(text).width;

  //   console.log("The width of the text is:", textWidth);
};

const drawYGrid = (
  ctx: CanvasRenderingContext2D,
  canvas: HTMLCanvasElement
) => {
  const arr = new Array(24).fill(0.1);
  let start = 36;
  arr.forEach((item, index) => {
    const text = (start + index * 0.1).toFixed(1);
    let strWidth = ctx.measureText(text).width;
    if (index % 3 === 0) {
      drawText(ctx, canvas, text, 14, -30, index * 10 - 7);
    }
  });
};

const getY = (num: number) => {
  return ((10 * (num - 36)) / 0.1).toFixed(0);
};
export const drawData = (
  ctx: CanvasRenderingContext2D,
  canvas: HTMLCanvasElement,
  dataList: FieldType[]
) => {
  // 初始化画布
  initSize(canvas);
  //   // 绘制网格线
  const gridSize = 10; // 每个网格单元的大小
  const gridCount = Math.floor(
    Math.max(canvas.width, canvas.height) / gridSize
  );
  drawGrid(ctx, canvas, gridSize, gridCount);
  // 绘制x轴刻度
  let preDay = "";
  dataList.forEach((item, index) => {
    if (index % 5 === 0) {
      const [f, s, t] = item.time.split("-");
      const text = preDay == s ? t : `${s}-${t}`;
      let strWidth = ctx.measureText(text).width;
      const x = index * 10 - strWidth/2-2
      drawText(ctx, canvas, text, 14,x , -30);
      ctx.beginPath()
      ctx.moveTo(index*gridSize,0)
      ctx.lineTo(index*gridSize,-6)
      ctx.strokeStyle = 'blue'
      ctx.lineWidth = 2
      ctx.stroke()
      preDay = s
    }
  });
  // 绘制y轴温度
  drawYGrid(ctx, canvas);
  // 绘制折线图
  ctx.beginPath();
  ctx.moveTo(0, Number(getY(dataList[0].num)));
  dataList.forEach((item, index) => {
    const x = index * gridSize;
    const y = Number(getY(item.num));
    ctx.lineTo(x, y);
    if (item.isCircle == "1") {
      //   ctx.beginPath();
      ctx.arc(x, y, 2.4, 0, 2 * Math.PI);
      ctx.fillStyle = "blue";
      //   ctx.fill();
    }
  });
  ctx.strokeStyle = "black";
  ctx.lineWidth = 2;
  ctx.stroke();
  //   drawText(ctx, canvas, "36.1", 14, -30, 0);
  //   drawText(ctx, canvas, "你好啊", 40, 10, 10);
};
